/*
 *@description: 产品管理
 *@Author:@reynold
 *@Date:2025-03-22 11:06:38
 *@Update:2025-03-22 11:06:38
 *@Version: V1.0.0
*/
<template>
  <Card>
    <div>
      <div class="header">
        <div class="header_box"><el-button size="mini" @click="addproduct">添加</el-button></div>
        <div class="header_box"><el-input v-model="bindName" size="mini" placeholder="请输入名称"></el-input></div>
        <div class="header_box">
          <el-select v-model="bindStatus" size="mini" clearable placeholder="请选择状态">
            <el-option
              v-for="item in statusList"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </div>
        <!-- 选择栏目 -->
        <div class="header_box">
          <el-select v-model="bindIncluds" size="mini" clearable placeholder="请选择栏目">
            <el-option
              v-for="item in includsList"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div class="header_box"><el-button size="mini" @click="inquire">查询</el-button></div>
      </div>
      <div class="table">
        <el-table
          :data="productList"
          style="width: 100%">
          <el-table-column type="index" :index="initIndex()" label="序号" width="100"></el-table-column>
          <el-table-column
            prop="productNum"
            label="产品编号"
            width="180">
          </el-table-column>
          <el-table-column
            prop="name"
            label="名称">
          </el-table-column>
          <el-table-column
            label="图片">
            <template slot-scope="scope">
              <img :src="scope.row.image" />
            </template>
          </el-table-column>
          <el-table-column
            prop="price"
            label="价格">
          </el-table-column>
          <el-table-column
            label="状态">
            <template slot-scope="scope">
              <el-tag type="success" size="mini" effect="dark" v-if="scope.row.status == '正常'">正常</el-tag>
              <el-tag type="warning" size="mini" effect="dark" v-else>下架</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            prop="include"
            label="所属栏目">
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            width="100">
            <template slot-scope="scope">
              <el-button class="columnBtn1" type="text" size="small" @click="edit(scope.row)">编辑</el-button>
              <el-button v-if="scope.row.status == '正常'" class="columnBtn2" type="text" size="small" @click="takeDown(scope.row)">下架</el-button>
              <el-button v-else class="columnBtn3" type="text" size="small" @click="updateProduct(scope.row)">上架</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageQuery.pageNum"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageQuery.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>

      <!-- 抽屉 -->
      <el-drawer
          :title="title"
          :visible.sync="drawer">
          <div class="demo-drawer__content">
            <el-form :model="drawerForm">
              <el-form-item label="产品编号" :label-width="formLabelWidth">
                <el-input v-model="drawerForm.productNum" disabled autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="名称" :label-width="formLabelWidth">
                <el-input v-model="drawerForm.name" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="价格" :label-width="formLabelWidth">
                <el-input v-model="drawerForm.price" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="状态" :label-width="formLabelWidth">
                <el-select v-model="drawerForm.status">
                  <el-option
                    v-for="item in statusList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="所属栏目" :label-width="formLabelWidth">
                <el-select v-model="drawerForm.include">
                  <el-option
                    v-for="item in includsList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-form>
            <div class="demo-drawer__footer">
              <el-button @click="cancelForm">取 消</el-button>
              <el-button type="primary" @click="handlesubmit" :loading="loading">{{ loading ? '提交中 ...' : '确 定' }}</el-button>
            </div>
          </div>
      </el-drawer>
    </div>
  </Card>
</template>

<script>
import Card from '@/components/Card/index.vue'
import instance from '@/utils/instance.js'
import utils from '@/utils/utils.js'
export default {
  data(){
    return{
      // 抽屉
      title:'',
      drawer:false,
      drawerForm:{},
      formLabelWidth: '100px',
      loading:false,
      // 搜索用的名称
      bindName:'',
      bindStatus:'',
      bindIncluds:'',
      statusList:[
        {value:'正常',label:'正常'},
        {value:'下架',label:'下架'},
      ],
      includsList:[],
      productList:[],
      pageQuery:{
        pageNum:1,
        pageSize:10
      },
      total:100
    }
  },
  methods:{
    // 初始序号
    initIndex(){
      return (this.pageQuery.pageNum - 1) * this.pageQuery.pageSize + 1
    },
    // 获取所有栏目
    getAllIncluds(){
      instance.get('/product').then(res=>{
        this.includsList = res.data.data
      }).catch(err=>{})
    },
    // 分页获取所有产品数据
    getProductList(){
      let params = {
        pageNum:this.pageQuery.pageNum,
        pageSize:this.pageQuery.pageSize,
        name:this.bindName?this.bindName:'',
        status:this.bindStatus?this.bindStatus:'',
        include:this.bindIncluds?this.bindIncluds:''
      }
      instance.post('/product/list',params).then(res=>{
        console.log(res);
        this.productList = res.data.data
        this.total = res.data.total
      })
    },
    // 按条件查询
    inquire(){
      this.getProductList()
    },

    // 下架产品
    takeDown(scope){
      instance.post('/product/tackdown',scope.id).then(res=>{
        utils.showSuccess(res.data.message)
        this.getProductList()
      })
    },
    // 上架产品
    updateProduct(scope){
      instance.post('/product/update',scope.id).then(res=>{
        utils.showSuccess(res.data.message)
        this.getProductList()
      })
    },
    // 点击编辑打开抽屉
    edit(scope){
      this.title = '编辑产品'
      this.drawerForm = scope
      this.drawer = true
    },
    // 发送编辑产品列表
    handlesubmit(){
      if(this.title == '编辑产品'){
        this.loading = true
        instance.post('/product/edit',this.drawerForm).then(res=>{
          utils.showSuccess(res.data.message)
          this.getProductList()
          this.drawer = false
          this.loading = false
        })
      }else{
        this.loading = true
        instance.post('/product/addproduct',this.drawerForm).then(res=>{
          utils.showSuccess(res.data.message)
          this.getProductList()
          this.drawer = false
          this.loading = false
        })
      }
    },

    // 取消抽屉
    cancelForm(){
      this.drawer = false
    },
    
    // 添加产品
    addproduct(){
      this.title = '添加产品'
      this.drawerForm = {}
      this.drawer = true
    },

    handleSizeChange(val) {
      this.pageQuery.pageSize = val
      this.getProductList()
    },
    handleCurrentChange(val) {
      this.pageQuery.pageNum = val
      this.getProductList()
    }
  },
  components:{
    Card
  },
  created(){
    this.getAllIncluds()
    this.getProductList()
  }
}
</script>

<style lang="less" scoped>
.header{
  display: flex;
  .header_box{
    margin-right: 5px;
    .el-button--mini{
      background-color: #188b8f;
      color: #fff;
    }
  }
}
.demo-drawer__content{
  form{
    height: 80vh;
  }
  .demo-drawer__footer{
    float: right;
    margin-right: 15px;
  }
}
</style>